<template>
  <div class="register">
    <back />
    <div class="introduce">
      <el-card
        :class="{ 'box-card-active': registerForm.role === '企业人员' }"
        class="box-card m-b-20"
      >
        <template #header>
          <span>企业人员</span>
        </template>
        <div>
          适用于申请入驻科技园的迁入企业或新成立企业用户。
          <!-- 适用于企业员工、能提供企业营业执照等用户，主要用于发布需求、寻求科技成果等。 -->
        </div>
      </el-card>
      <el-card :class="{ 'box-card-active': registerForm.role === '讲师' }" class="box-card m-b-20">
        <template #header>
          <span>讲师</span>
        </template>
        <div>
          适用于院校等教育机构人员、成功企业家、经验丰富的创业成功者等用户。
          <!-- 适用于院校等教育机构人员、成功企业家、经验丰富的创业成功者等用户，主要用于提供视频培训，进行疑问的讨论和解答等。 -->
        </div>
      </el-card>
      <el-card :class="{ 'box-card-active': registerForm.role === '技术专家' }" class="box-card">
        <template #header>
          <span>技术专家</span>
        </template>
        <div>
          适用于拥有一定技术和开发能力的开发团队或个人开发者等用户。
          <!-- 适用于拥有一定技术和开发能力的开发团队或个人开发者，主要用于发布成果，解决需求等。 -->
        </div>
      </el-card>
    </div>
    <!-- <el-card class="tabs-card">
      <el-tabs type="card" v-model="activeTab">
        <enterprisePane @get-code="getVerificationCode" />
        <teacherPane @get-code="getVerificationCode" />
        <technologistPane @get-code="getVerificationCode" />
      </el-tabs>
    </el-card> -->
    <el-card class="tabs-card">
      <el-form
        label-width="120px"
        label-position="left"
        ref="registerFormRef"
        class="register-form"
        :rules="rules"
        :model="registerForm"
      >
        <el-form-item label="选择角色类型" prop="role">
          <el-radio-group v-model="registerForm.role">
            <el-radio v-for="item in roles" :key="item.label" :label="item.label">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="role-tip m-b-20" v-if="registerForm.role">
          <img class="tip-icon" src="@/assets/images/tip.png" alt="提示" />
          <span>
            当前选择的角色为
            <span class="role-color">{{ registerForm.role }}</span>
            ，之后不可更改
          </span>
        </div>
        <el-form-item label="账号" prop="account">
          <el-input v-model="registerForm.account" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="registerForm.phoneNumber" placeholder="请输入手机号" />
        </el-form-item>
        <!-- <el-form-item class="form-item-code" label="验证码" prop="code">
          <el-input v-model="registerForm.code" placeholder="请输入验证码" />
          <el-button :disabled="isBtnDisabled" @click="getVerificationCode">获取验证码</el-button>
        </el-form-item> -->
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="registerForm.confirmPassword"
            placeholder="请再次输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitregisterForm">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import back from '@/components/back/index.vue';
import { register, sendCode } from '@/api/login';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { useRouter } from 'vue-router';

const registerFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  role: [
    {
      required: true,
      message: '请选择您的角色',
      trigger: 'change',
    },
  ],
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 1, max: 12, message: '长度为6~12位', trigger: 'blur' },
  ],
  phoneNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const reg = /^1[3-9]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error('手机号码格式不正确'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  confirmPassword: [
    {
      required: true,
      validator: ValidityConfirmPassword,
      trigger: 'blur',
    },
  ],
});
function ValidityConfirmPassword(rule: any, value: any, callback: any) {
  if (value === '') {
    callback(new Error('请输入确认密码'));
  } else if (value !== registerForm.value.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}
const registerForm = ref({
  account: '',
  phoneNumber: '',
  code: '',
  password: '',
  confirmPassword: '',
  role: '',
});
const roles = [
  { name: '企业人员', label: '企业人员' },
  {name:'团队人员',lebel:'团队人员'},
  { name: '讲师', label: '讲师' },
  { name: '技术专家', label: '技术专家' },
];
// 将表单的数据转换成接口需要的数据
function transformData() {
  const formObj = registerForm.value;
  return {
    username: formObj.account,
    password: formObj.password,
    phone: formObj.phoneNumber,
    code: formObj.code,
    role: formObj.role === '讲师' ? 100 : formObj.role === '技术专家' ? 102 : 101,
  };
}
const router = useRouter();
function submitregisterForm() {
  const form = registerFormRef.value;
  form?.validate((valid: boolean) => {
    if (valid) {
      const requestDate = transformData();
      register(requestDate).then((res: any) => {
        if (res.code === 200) {
          ElMessage({
            message: '注册成功',
            type: 'success',
            duration: 1500,
          });
          setTimeout(() => {
            router.push({
              name: 'login',
            });
          }, 1500);
        } else {
          ElMessage({
            message: res.msg,
            type: 'error',
          });
        }
      });
    } else {
      return false;
    }
  });
}

// 获取验证码
const isBtnDisabled = ref<boolean>(true);
watch(
  () => registerForm.value.phoneNumber,
  (newV) => {
    const reg = /^1[3-9]\d{9}$/;
    if (reg.test(newV)) {
      isBtnDisabled.value = false;
    } else {
      isBtnDisabled.value = true;
    }
  }
);
function getVerificationCode() {
  if (isBtnDisabled.value) return;
  // 省略获取验证码的逻辑
  sendCode(registerForm.value.phoneNumber).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        message: '短信已发送',
        type: 'success',
      });
    } else {
      ElMessage({
        message: res.msg,
        type: 'error',
      });
    }
  });
}
</script>

<style lang="scss" scoped>
.register {
  display: flex;
  padding: 20px 50px;
  .introduce {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    // 卡片样式
    .box-card {
      width: 100%;
      opacity: 0.5;
    }
    .box-card-active {
      opacity: 1;
    }
  }
  .tabs-card {
    flex: 1;
    padding: 0 50px;
    background-color: #fff;
    margin-left: 20px;
    .role-tip {
      // color: #409eff;
      display: flex;
      justify-content: center;
      align-items: center;
      .tip-icon {
        height: 1em;
      }
      .role-color {
        color: red;
      }
    }
  }
}
.form-item-code :deep(.el-form-item__content) {
  flex-wrap: nowrap;
}
</style>
